<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible"
  >
    <el-form
      ref="formRef"
      :inline="true"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      class="demo-form-inline"
      v-loading="formLoading"
    >

      <el-row :gutter="30">
        <el-col >
          <el-form-item label="数值/百分比"  label-width="110px"  prop="deductType">
            <el-select
              v-model="formData.deductType"
              @change="selectValue"
              placeholder="请选择"
              clearable>
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">

              </el-option>

            </el-select>
          </el-form-item>
        </el-col>

        <el-col>
        <el-form-item label="直接利润" label-width="110px"  prop="directProfit">
          <el-input v-model="formData.directProfit" oninput ="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入直接利润" />
        </el-form-item>
          <el-text class="m-my">{{unitValue}}</el-text>
        </el-col>
        <el-col>
        <el-form-item label="间接利润" label-width="110px" prop="indirectProfit">
          <el-input v-model="formData.indirectProfit" oninput ="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入间接利润" />
        </el-form-item>
          <el-text class="m-my">{{unitValue}}</el-text>
        </el-col>
      </el-row>

      <el-card>
      <el-row :gutter="30">
        <el-row>
          <el-tag type="primary">区域经理</el-tag>

          <el-col :span="5">
            <el-form-item label="提成">
            </el-form-item>
          </el-col>
<!--          <el-col :span="7">-->
<!--            <el-slider style="30px" v-model="formInline.value" :min="0.1" :max="1000" :step="0.1">-->
<!--            </el-slider>-->
<!--          </el-col>-->
          <el-col :span="10">
            <el-form-item label="值" prop="regionalManagerRoyalty">
              <el-input v-model="formData.regionalManagerRoyalty" oninput ="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入值" />
            </el-form-item>
          </el-col>
          <el-col :span="1" style="margin-top: 5px;margin-left: -15px">
            <el-text>{{unitValue}}</el-text>
          </el-col>
        </el-row>

      </el-row>


      <el-row :gutter="30">
        <el-row>
          <el-tag type="success">业务主管</el-tag>

          <el-col :span="5">
            <el-form-item label="提成">
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="值" prop="businessSupervisorRoyalty">
              <el-input v-model="formData.businessSupervisorRoyalty" oninput ="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入值" />
            </el-form-item>
          </el-col>
          <el-col :span="1" style="margin-top: 5px;margin-left: -15px">
            <el-text>{{unitValue}}</el-text>
          </el-col>
        </el-row>

      </el-row>


      <el-row :gutter="30">
        <el-row>
          <el-tag type="info">业务经理</el-tag>

          <el-col :span="5">
            <el-form-item label="提成">
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="值" prop="businessManagerRoyalty">
              <el-input v-model="formData.businessManagerRoyalty" oninput ="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入值" />
            </el-form-item>
          </el-col>
          <el-col :span="1" style="margin-top: 5px;margin-left: -15px">
            <el-text>{{unitValue}}</el-text>
          </el-col>
        </el-row>

      </el-row>

        <el-row :gutter="30">
          <el-row>
            <el-tag  type="warning">权证主管</el-tag>

            <el-col :span="5">
              <el-form-item label="提成">
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="值" prop="warrantSupervisor">
                <el-input v-model="formData.warrantSupervisor" oninput ="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入值" />
              </el-form-item>
            </el-col>

            <el-col :span="1" style="margin-top: 5px;margin-left: -15px">
              <el-text>{{unitValue}}</el-text>
            </el-col>

          </el-row>

        </el-row>

      <el-row :gutter="30">
        <el-row>
          <el-tag style="margin-left: 11px" type="warning">推荐人</el-tag>

          <el-col :span="5">
            <el-form-item label="财富值返利">
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="值" prop="referrerRoyalty">
              <el-input v-model="formData.referrerRoyalty" oninput ="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入值" />
            </el-form-item>
          </el-col>

          <el-col :span="1" style="margin-top: 5px;margin-left: -15px">
            <el-text>{{cfUnitValue}}</el-text>
          </el-col>

        </el-row>

      </el-row>

      <el-row :gutter="30">
        <el-row>
          <el-tag style="margin-left: 22px" type="danger">客户</el-tag>

          <el-col :span="5">
            <el-form-item label="财富值返利">
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="值" prop="clientRoyalty">
              <el-input v-model="formData.clientRoyalty" oninput ="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入值" />
            </el-form-item>
          </el-col>

          <el-col :span="1" style="margin-top: 5px;margin-left: -15px">
            <el-text>{{cfUnitValue}}</el-text>
          </el-col>
        </el-row>


      </el-row>
      </el-card>

    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">

import * as ProductAccessPercentageApi from "@/api/hutai/productAccessPercentage";

const {t} = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const unitValue = ref('元')
const cfUnitValue = ref('')
// const productAccessId = ref('');
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  productAccessId: undefined,
  deductType: '0',
  directProfit: undefined,
  indirectProfit: undefined,
  regionalManagerRoyalty: undefined,
  businessSupervisorRoyalty: undefined,
  businessManagerRoyalty: undefined,
  warrantSupervisor:undefined,
  referrerRoyalty: undefined,
  clientRoyalty: undefined
})
const options = [
  { label: '数值', value: '0' },
  { label: '百分比', value: '1' },
];
const formRules = reactive({
  deductType: [{ required: true, message: '数值/百分比不能为空', trigger: 'blur' }],
  directProfit: [{ required: true, message: '直接利润不能为空', trigger: 'blur' }],
  indirectProfit: [{ required: true, message: '间接利润不能为空', trigger: 'blur' }],
  regionalManagerRoyalty: [{ required: true, message: '区域经理提成不能为空', trigger: 'blur' }],
  businessSupervisorRoyalty: [{ required: true, message: '业务主管提成不能为空', trigger: 'blur' }],
  businessManagerRoyalty: [{ required: true, message: '业务经理提成不能为空', trigger: 'blur' }],
  warrantSupervisor: [{ required: true, message: '权证主管提成不能为空', trigger: 'blur' }],
  referrerRoyalty: [{ required: true, message: '推荐人财富值返利不能为空', trigger: 'blur' }],
  clientRoyalty: [{ required: true, message: '客户财富值返利不能为空', trigger: 'blur' }],
})

const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await ProductAccessPercentageApi.getProductAccessPercentageByOrderId(id)
      if (formData.value.deductType==0){
        unitValue.value ='元'
        cfUnitValue.value =''
      }else {
        unitValue.value ='%'
        cfUnitValue.value ='%'
      }
    } finally {
      formLoading.value = false
    }
  }
  formData.value.productAccessId = id
}
defineExpose({open}) // 提供 open 方法，用于打开弹窗

const selectValue =  async (e) => {
  //resetForm()
  if (e==0){
    unitValue.value ='元'
    cfUnitValue.value =''
  }else {
    unitValue.value ='%'
    cfUnitValue.value ='%'
  }

}

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as ProductAccessPercentageApi.ProductAccessPercentageVO
    await ProductAccessPercentageApi.saveOrUpdate(data)
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}


/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    deductType: '0',
    directProfit: undefined,
    indirectProfit: undefined,
    regionalManagerRoyalty: undefined,
    businessSupervisorRoyalty: undefined,
    businessManagerRoyalty: undefined,
    warrantSupervisor:undefined,
    referrerRoyalty: undefined,
    clientRoyalty: undefined,
  }
  formRef.value?.resetFields()
}
</script>
<style>
.m-my{
  margin-left: -20px;
  margin-top: 6px;
  position: absolute;
}
</style>
